<template>
  <div id="add_menu_app">
    <el-dialog :title="form.id ? '编辑菜单' : '新增菜单'" :visible.sync="isShow.flag" width="50%">
      <el-form ref="form" :model="form" label-width="80px" :rules="rouls">
        <el-form-item label="上级菜单">
          <el-select v-model="form.pid" placeholder="请选择上级菜单">
            <el-option :label="'顶级菜单'" :value="0">顶级菜单</el-option>
            <el-option
              :label="m.title"
              :value="m.id"
              v-for="m in menuList"
              :key="m.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="1" :disabled="form.pid == '0' ? true : false"
              >目录</el-radio
            >
            <el-radio :label="2">菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="菜单地址" v-if="form.type == '2'">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" v-if="form.type == '1'">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态">
          <el-radio-group v-model="form.status" prop="status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow", "menuList"],
  data() {
    return {
      form: {
        id: 0,
        pid: "",
        type: 1,
        title: "",
        url: "",
        icon: "",
        status: 1,
      },
      rouls: {
        title: {
          required: true,
          message: "菜单名称不可以为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "菜单状态不可以为空",
          trigger: "change",
        },
      },
    };
  },
  methods: {
    onSubmit() {
      //提交数据
      var url = "";
      if (this.form.id > 0) {
        url = "/menuedit";
      } else {
        url = "/menuadd";
      }
      console.log(url);
      const post_data = { ...this.form };
      this.$axios.post(url, post_data).then((res) => {
        console.log(res);
      });
      //置空表单
      this.form = {
        id: 0,
        pid: "",
        type: "",
        title: "",
        url: "",
        icon: "",
        status: "",
      };
      //关闭表单
      this.isShow.flag = false;
    },
    setData(obj) {
      this.form = { ...obj };
    },
  },
};
</script>

<style>
</style>